<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Edit } from "@element-plus/icons-vue";
import { dayjs, ElMessage, ElMessageBox } from "element-plus";
import splitTextBox from "@/components/splitTextBox.vue";
import Qs from "qs";
import {
  getDeconRecord,
  createDeconRecord,
  flowList,
  equipmentList,
  endDecon,
} from "@/api/disinfectionRecords.js";
import tablePageSetting from "@/hooks/index.js";
// const query = reactive({
//   keyword: "",
//   equipName: "",
//   startDate: "",
//   endDate: "",
// });
const {
  headerStyle,
  tableData,
  total,
  loading,
  page,
  query,
  date,
  handleCurrentChange,
  getList,
  handelConfirmFun,
  handleSearch,
  handleReset,
} = tablePageSetting(getDeconRecord);
const router = useRouter();
const size = ref("large");
// const date = ref("");
const equOptions = ref([]);
const flowOptions = ref([]);
const formRef = ref(null);
const searchVisible = ref(false);
const form = ref({
  name: "",
  price: "",
  MJProportion: "",
  proteinProportion: "",
  calciumProportion: "",
  phosphorusProportion: "",
});
const rules = reactive({
  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
  price: [{ required: true, message: "请输入产品单价", trigger: "blur" }],
  MJProportion: [{ required: true, message: "请输入净能MJ", trigger: "blur" }],
  proteinProportion: [
    { required: true, message: "请输入可消化粗蛋白", trigger: "blur" },
  ],
  calciumProportion: [{ required: true, message: "请输入钙", trigger: "blur" }],
  phosphorusProportion: [
    { required: true, message: "请输入磷", trigger: "blur" },
  ],
});
const generOptions = ref([
  { label: "男", value: "1" },
  { label: "女", value: "2" },
]);
const btnLoading = ref(false);
const showPatient = ref(false);
// 状态文本描述 enum
// 0-未开始，1-进行中，2-已完成，3-提前结束
const statusTextInfo = ref(["", "进行中", "已完成", "提前结束"]);
const abnormalTextInfo = ref(["否", "是"]);
// 获取流程下拉列表
const getFolwListFun = () => {
  flowList().then((res) => {
    if (res.code == 0 && res.data) {
      flowOptions.value = res.data;
    }
  });
};
// 获取设备下拉列表
const getEquipmentFUn = () => {
  equipmentList().then((res) => {
    if (res.code == 0 && res.data) {
      equOptions.value = res.data;
    }
  });
};

// 生命周期
onMounted(() => {
  getList(query);
  // getFolwListFun();
  // getEquipmentFUn();
});

// 开始活动
const createNewActive = () => {
  searchVisible.value = true;
};
// 关闭弹框之前
const handleClose = () => {
  form.value = {
    flowId: "",
    equipId: "",
    operator: "",
    patientName: "",
    patientGender: "",
    patientAge: "",
    patientIdNo: "",
  };
  searchVisible.value = false;
  // form.resetFields()
};
// 重置患者信息
const handleSufferReset = () => {
  form.value.patientName = "";
  form.value.patientGender = "";
  form.value.patientAge = "";
  form.value.patientIdNo = "";
};
// 搜索
// const handleSearch = () => {};
// 重置
// const handleReset = () => {};
// 查看详情
const handleCheck = (index, row) => {
  // historyDetail
  router.push("/home/historyDetail?id=" + row.id);
};
// 结束
const handleStop = (e) => {
  let data = {
    id: e.row.id,
  };
  endDecon(data).then((res) => {
    if (res.code == 0) {
      getList();
    } else {
      ElMessage.error(res.message);
    }
  });
};

const selectChange = (val) => {
  const obj = flowOptions.value.find((item) => {
    return item.id == val;
  });
  obj.linkPatient == 1
    ? (showPatient.value = true)
    : (showPatient.value = false);

  handleSufferReset();
};

const dateChange = (val) => {
  console.log(val, "val");
  if (val) {
    query.value.startDate = val[0];
    query.value.endDate = val[1];
  } else {
    query.value.startDate = "";
    query.value.endDate = "";
  }
  getList();
};
// 完成
const submitSearch = (formRef) => {
  console.log(form, "form");
  formRef.validate((valid, fields) => {
    if (valid) {
      createDeconRecord(form.value).then((res) => {
        if (res.code == 200) {
          handleClose();
          getList();
        } else {
          ElMessage.error(res.message);
        }
      });
    } else {
    }
  });
};
// 导出
const exportExcel = () => {
  window.location.href =
    import.meta.env.VITE_APP_WEWORK_LINK +
    "decon-record/export?" +
    Qs.stringify(query.value);
};
const str = "这是测试的文本";
const timeFormat = (time) => {
  return dayjs().format("YYYY-MM-DD");
};
</script>

<template>
  <div>
    <div class="pad-25 bg-fff">
      <div class="handle-box flex flex">
        <!-- @click="createNewActive" -->
        <el-button
          type="primary"
          class="handle-del mar-r-10"
          :size="size"
          @click="createNewActive"
          >添加产品</el-button
        >
        <el-input
          v-model="query.keyword"
          placeholder="请输入患者姓名/操作人姓名"
          class="handle-input mar-r-10"
          :size="size"
        ></el-input>
        <el-button
          type="primary"
          class="handle-del"
          @click="handleSearch"
          :size="size"
          >查询</el-button
        >
      </div>
      <div class="container">
        <el-table
          :data="tableData"
          style="width: 100%"
          header-cell-class-name="table-header"
          v-loading="loading"
          :header-cell-style="headerStyle"
          :size="size"
        >
          <el-table-column prop="name" label="产品名称" />
          <el-table-column prop="price" label="产品单价" />
          <el-table-column prop="MJProportion" label="净能MJ" />
          <el-table-column prop="proteinProportion" label="可消化粗蛋白" />
          <el-table-column prop="calciumProportion" label="钙" />
          <el-table-column prop="phosphorusProportion" label="磷" />
          <el-table-column
            prop="createTime"
            label="创建时间"
            :formatter="(row) => dayjs(row.createTime).format('YYYY-MM-DD')"
          />
        </el-table>
        <div class="mar-t-20">
          <el-pagination
            v-model:current-page="page.page"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 添加产品-->
    <el-drawer
      title="添加产品"
      v-model="searchVisible"
      :before-close="handleClose"
      append-to-body
      width="40%"
    >
      <div class="demo-drawer__content padding">
        <splitTextBox text="产品信息" class="mar-b-15" />
        <el-form
          ref="formRef"
          label-position="left"
          label-width="110px"
          :model="form"
          :size="size"
          :rules="rules"
        >
          <el-form-item label="产品名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入产品名称"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input
              v-model="form.price"
              placeholder="请输入单价"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="净能MJ" prop="MJProportion">
            <el-input v-model="form.MJProportion" placeholder="请输入净能MJ" />
          </el-form-item>
          <el-form-item label="可消化粗蛋白" prop="proteinProportion">
            <el-input
              v-model="form.proteinProportion"
              placeholder="请输入净能MJ"
            />
          </el-form-item>
          <el-form-item label="钙" prop="calciumProportion">
            <el-input
              v-model="form.calciumProportion"
              placeholder="请输入净能MJ"
            />
          </el-form-item>
          <el-form-item label="磷" prop="phosphorusProportion">
            <el-input
              v-model="form.phosphorusProportion"
              placeholder="请输入净能MJ"
            />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="searchVisible = false" :size="size">
            返回
          </el-button>
          <el-button
            type="primary"
            @click="submitSearch(formRef)"
            :loading="btnLoading"
            :size="size"
          >
            完成
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/mixin/css/tablePublic";
.left-btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 200px;
  height: 36px;
  z-index: 1111;
}
</style>